export type SizeInfo = [width: number, height: number];
export type TabSizeMap = Map<
  React.Key,
  { width: number; height: number; left: number; top: number }
>;

export interface TabOffset {
  width: number;
  height: number;
  left: number;
  right?: number;
  top: number;
}
export type TabOffsetMap = Map<React.Key, TabOffset>;

export interface AnimatedConfig {
  inkBar?: boolean;
  tabPane?: boolean;
}
export type TabPosition = 'top' | 'bottom';
export type Tab = {
  key: string;
  label: React.ReactNode;
  disabled?: boolean;
  forceRender?: boolean;
  children?: React.ReactNode;
  paneStyle?: React.CSSProperties;
  paneClassName?: string;
  destroyInactiveTabPane?: boolean;
};

export type OnTabScroll = (info: {
  direction: 'left' | 'right' | 'top' | 'bottom';
}) => void;

export interface TabsProps {
  id?: string;
  prefixCls?: string;
  rootClassName?: string; //ym-tabs 对应的calss
  tabPosition?: TabPosition;
  items: Tab[];
  noneedTabPane?: boolean;
  activeKey?: string;
  defaultActiveKey?: string;
  tabBarGutter?: number;
  tabBarStyle?: React.CSSProperties; //ym-tabs-nav 对应的style
  tabBarListStyle?: React.CSSProperties; //ym-tabs-nav-list
  destroyInactiveTabPane?: boolean;
  animated?: AnimatedConfig;
  onChange?: (activeKey: string) => void;
  onTabClick?: (key: string, e: React.MouseEvent | React.KeyboardEvent) => void;
  onTabScroll?: OnTabScroll;
}

export interface TabNavListProps {
  id: string;
  activeKey: string;
  tabPosition: TabPosition;
  style?: React.CSSProperties;
  tabBarListStyle?: React.CSSProperties;
  animated: AnimatedConfig;
  tabBarGutter?: number;
  onTabClick: (
    activeKey: string,
    e: React.MouseEvent | React.KeyboardEvent,
  ) => void;
  onTabScroll?: OnTabScroll;
}

export interface TabNodeProps {
  id: string;
  prefixCls: string;
  tab: Tab;
  active: boolean;
  style?: React.CSSProperties;
  onClick: (e: React.MouseEvent | React.KeyboardEvent) => void;
  onFocus?: React.FocusEventHandler;
}

export interface TabPanelListProps {
  id: string;
  activeKey: string;
  animated?: AnimatedConfig;
  tabPosition?: TabPosition;
  destroyInactiveTabPane?: boolean;
}

export interface TabPaneProps {
  prefixCls: string;
  id: string;
  tabKey: string;
  active: boolean;
  style: React.CSSProperties;
  className: string;
  children: React.ReactNode;
}
